<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '在线客服',
  },
}
</route>

<script setup>
import { onMounted, ref } from 'vue'

// 消息数据
const messages = ref([
  {
    sender: 'service',
    content: '您好，请问有什么可以帮助您的吗？',
    time: new Date(),
  },
])

// 常见问题
const quickQuestions = ref([
  '会员如何购买？',
  '绘本无法打开怎么办？',
  '如何分享给好友？',
  '阅读记录不见了',
  '如何修改个人信息',
  '如何联系人工客服',
])

// 输入消息
const inputMessage = ref('')
// 客服正在输入状态
const isServiceTyping = ref(false)
// 是否显示快捷问题
const showQuickQuestions = ref(false)

// 格式化时间
function formatTime(date) {
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

// 发送消息
function sendMessage() {
  if (!inputMessage.value.trim())
    return

  const newMsg = {
    sender: 'user',
    content: inputMessage.value,
    time: new Date(),
  }

  messages.value.push(newMsg)
  inputMessage.value = ''

  // 模拟客服回复
  simulateServiceReply()
}

// 发送快捷问题
function sendQuickQuestion(question) {
  inputMessage.value = question
  showQuickQuestions.value = false
  // 自动发送
  setTimeout(() => {
    sendMessage()
  }, 300)
}

// 模拟客服回复
function simulateServiceReply() {
  isServiceTyping.value = true

  setTimeout(() => {
    const replies = [
      '我明白了，让我帮您查看一下。',
      '感谢您的反馈，我们会尽快处理。',
      '这个问题通常是由于网络问题导致的，请检查您的网络连接。',
      '您的会员状态正常，可能是缓存问题，请尝试退出重新登录。',
      '我们已经记录您的问题，客服专员会尽快联系您。',
    ]

    const randomReply = replies[Math.floor(Math.random() * replies.length)]

    messages.value.push({
      sender: 'service',
      content: randomReply,
      time: new Date(),
    })

    isServiceTyping.value = false
  }, 1500 + Math.random() * 2000)
}

// 切换快捷问题显示
function toggleQuickQuestions() {
  showQuickQuestions.value = !showQuickQuestions.value
}

// 开始语音输入
function startVoiceInput() {
  uni.showToast({
    title: '语音输入功能开发中',
    icon: 'none',
  })
}

// 返回上一页
function goBack() {
  uni.navigateBack()
}

onMounted(() => {
  // 页面加载时滚动到底部
  setTimeout(() => {
    uni.pageScrollTo({
      scrollTop: 99999,
      duration: 0,
    })
  }, 100)
})
</script>

<template>
  <view class="customer-service-container">
    <!-- 聊天区域 -->
    <scroll-view
      class="chat-area"
      scroll-y="true"
      :scroll-into-view="`msg-${messages.length - 1}`"
      :scroll-with-animation="true"
    >
      <!-- 欢迎消息 -->
      <view id="msg-0" class="system message-wrapper">
        <view class="message-box">
          <text class="message-content">
            您好，我是绘本阅读客服小助手，请问有什么可以帮您？
          </text>
          <text class="message-time">
            {{ formatTime(new Date()) }}
          </text>
        </view>
      </view>

      <!-- 历史消息 -->
      <view
        v-for="(msg, index) in messages"
        :id="`msg-${index + 1}`"
        :key="index"
        class="message-wrapper"
        :class="msg.sender"
      >
        <image
          v-if="msg.sender === 'user'"
          class="user-avatar"
          src="https://pic1.zhimg.com/v2-3b4fc7e3a1195a081d0259246c6deeb4_r.jpg"
          mode="aspectFill"
        />
        <view class="message-box" :class="msg.sender">
          <text class="message-content">
            {{ msg.content }}
          </text>
          <text class="message-time">
            {{ formatTime(msg.time) }}
          </text>
        </view>
        <image
          v-if="msg.sender === 'service'"
          class="service-avatar"
          src="https://img.alicdn.com/imgextra/i4/2201501586919/O1CN01Z5Q5Qk1xW5jYHxZ8O_!!2201501586919.jpg"
          mode="aspectFill"
        />
      </view>

      <!-- 客服正在输入提示 -->
      <view v-if="isServiceTyping" class="typing-indicator">
        <view class="typing-dots">
          <view class="dot" />
          <view class="dot" />
          <view class="dot" />
        </view>
        <text>客服正在输入...</text>
      </view>
    </scroll-view>

    <!-- 常见问题快捷入口 -->
    <view v-if="showQuickQuestions" class="quick-questions">
      <view class="section-title">
        常见问题
      </view>
      <view class="questions-grid">
        <view
          v-for="(question, index) in quickQuestions"
          :key="index"
          class="question-item"
          @click="sendQuickQuestion(question)"
        >
          <text>{{ question }}</text>
        </view>
      </view>
    </view>

    <!-- 输入区域 -->
    <view class="input-area">
      <view class="input-wrapper">
        <uni-icons
          type="plus"
          size="24"
          color="#666"
          @click="toggleQuickQuestions"
        />
        <input
          v-model="inputMessage"
          class="message-input"
          placeholder="请输入您的问题"
          placeholder-class="placeholder"
          confirm-type="send"
          @confirm="sendMessage"
        >
        <uni-icons
          v-if="inputMessage"
          type="paperplane"
          size="24"
          color="#4a90e2"
          @click="sendMessage"
        />
        <uni-icons
          v-else
          type="mic"
          size="24"
          color="#666"
          @click="startVoiceInput"
        />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.customer-service-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.chat-area {
  flex: 1;
  padding: 15px;
  overflow: hidden;

  .message-wrapper {
    display: flex;
    margin-bottom: 20px;

    &.system {
      justify-content: center;

      .message-box {
        background-color: #e8f5e9;
        padding: 10px 15px;
        border-radius: 18px;
        max-width: 80%;

        .message-content {
          color: #666;
          font-size: 14px;
        }

        .message-time {
          display: none;
        }
      }
    }

    &.service {
      justify-content: flex-start;
      align-items: flex-start;

      .message-box {
        margin-left: 10px;
        background-color: #fff;
        border-radius: 0 18px 18px 18px;
        max-width: 70%;
      }
    }

    &.user {
      justify-content: flex-end;
      align-items: flex-start;

      .message-box {
        margin-right: 10px;
        background-color: #4a90e2;
        border-radius: 18px 0 18px 18px;
        max-width: 70%;

        .message-content {
          color: #fff;
        }

        .message-time {
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }

    .user-avatar,
    .service-avatar {
      width: 36px;
      height: 36px;
      border-radius: 18px;
      align-self: flex-end;
    }

    .message-box {
      padding: 12px 15px;
      position: relative;

      .message-content {
        font-size: 16px;
        line-height: 1.4;
        word-break: break-word;
      }

      .message-time {
        display: block;
        font-size: 11px;
        color: #999;
        margin-top: 5px;
        text-align: right;
      }
    }
  }

  .typing-indicator {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-bottom: 15px;
    color: #999;
    font-size: 13px;

    .typing-dots {
      display: flex;
      margin-right: 8px;

      .dot {
        width: 6px;
        height: 6px;
        background-color: #999;
        border-radius: 50%;
        margin-right: 4px;
        animation: typing 1.4s infinite both;

        &:nth-child(1) {
          animation-delay: 0s;
        }

        &:nth-child(2) {
          animation-delay: 0.2s;
        }

        &:nth-child(3) {
          animation-delay: 0.4s;
        }
      }
    }
  }
}

.quick-questions {
  background-color: #fff;
  padding: 15px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;

  .section-title {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
  }

  .questions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    .question-item {
      padding: 8px 12px;
      background-color: #f5f5f5;
      border-radius: 15px;
      font-size: 13px;
      color: #333;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.input-area {
  padding: 10px 15px;
  background-color: #fff;
  border-top: 1px solid #eee;

  .input-wrapper {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 8px 15px;

    .message-input {
      flex: 1;
      height: 36px;
      padding: 0 10px;
      font-size: 15px;
    }

    .placeholder {
      color: #999;
      font-size: 15px;
    }
  }
}

@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}
</style>
